<template>
  <div class="wrap wrapbg">
    <!-- 骨架屏 -->
    <div>
      <skeleton :skeletonFlag="skeletonFlag"></skeleton>
    </div>

    <!-- 轮播图，微信原生 -->
    <swiper class='swiper'
      indicator-dots='true'
      autoplay='true'
      interval='5000'
      duration='1000'
      circular="true"
      indicator-color="rgba(255, 255, 255, .2)"
      indicator-active-color="rgba(255, 255, 255, .7)"
    >
      <block v-for='(item, index) in swiperData' :index='index' :key='item+index'>
        <swiper-item class="swiper-wrap" @click="swiperPage(item.link)">
          <!-- 使用了原生的缩放功能，图高超出会被剪裁 -->
          <image :src='item.imgurl' class='swiper-image' mode='aspectFill'/>
          <!-- 轮播标题  -->
          <!-- <view class='swiper-textwrap'>
            <text class="title">sadfasdfsdaf</text>
          </view> -->
        </swiper-item>
      </block>
    </swiper>

    <!-- 分类图标及LOGO -->
    <div class="nav">
      <div class="navbox">
        <img class="icon-nav" src="/static/images/icon_order.png">
        <span>我的订单</span>
      </div>
      <div class="navbox">
        <img class="icon-nav-logo" src="/static/images/icon_plogo.png">
        <span>德施曼</span>
      </div>
      <div class="navbox">
        <img class="icon-nav" src="/static/images/icon_service.png">
        <span>客服服务</span>
        <button class="customer" open-type="contact" />
      </div>
    </div>
    <!-- 尺寸比例750宽 120高 自适应 -->
    <div class="banner-ad">
      <image
      mode="aspectFill"
      lazy-load=true
      src="https://www.fybqq.com/wp-content/uploads/1970/01/1543236248-2.jpeg"
      />
    </div>
    <!-- 核心列表内容层区域 -->
    <div class="container">
      <!-- 团购组件，传入渲染的数据 -->
      <!-- <groupBuy :groupBuyList="groupBuyList" :navto="true"></groupBuy> -->

      <!-- 商品列表组件 -->
      <card :goodsList="goodsList" :navto="true"></card>
    </div>

    <!-- 底部加载更多提示 -->
    <div>
      <listLoading :pageMoreFlag="pageMoreFlag"></listLoading>
    </div>

  </div>
</template>

<script>
import {
  fetch, bindViewTap, hideLoading, getUserSetting, closeSkeleton
  // , showLoading
} from '@/utils/index' // 引入公用库
import { getIndexList, getUrl } from '@/utils/api' // 请求封装公用库
// import store from '@/utils/store' // 全局状态管理

// 引入组件
import card from '@/components/card'
import groupBuy from '@/components/groupBuy'
import listLoading from '@/components/listLoading'
import skeleton from '@/components/skeleton'

export default {
  data () {
    return {
      swiperData: [], // 轮播图数据
      groupBuyList: [], // 精选团购数据
      goodsList: [], // 商品列表数据
      pageCountPage: 1, // 缓存上拉加载页数
      pageMoreFlag: true, // 加载更多控制, 为假显示没有更多
      skeletonFlag: true // 骨架屏层控制
    }
  },
  // 引入组件可当标签使用
  components: {
    card, groupBuy, listLoading, skeleton
  },
  // 定义自定义函数
  methods: {
    // 轮播 图片跳转商品事件函数
    swiperPage (data) {
      // TODO: 跳转到商品页面
      console.log('商品跳转id:', data)
      bindViewTap('../index/main')
    }
  },
  // 每次页面显示的时候都检测一下是否登陆，微信原生生命周期
  onShow () {
    // 一进来看看用户是否授权过
    getUserSetting()
  },
  // 在实例创建完成后被立即调用
  mounted () {
    // 请求轮播数据，启用了加载层遮罩层
    fetch(getUrl('/swiper')).then(data => {
      // 处理数据，根据后台定义的排序顺序显示
      let newData = data.data
      if (newData.length > 1) {
        newData = newData.sort((a, b) => {
          return a.sort - b.sort
        })
      }
      // 保存轮播图数据
      this.swiperData = newData
    })
    // 请求团购数据
    // fetch(getUrl('/groupBuyList')).then(data => {
    //   this.groupBuyList = data.data || [] // 保存数据直接渲染
    // })
    // 请求商品列表数据
    fetch(getUrl('/goodsList')).then(data => {
      this.goodsList = data.data || [] // 保存数据直接渲染
    }).then(() => {
      // 关闭遮罩层加载中，公用库内的方法（封装好的）
      hideLoading(300)
    }).then(() => {
      // 关闭骨架屏
      closeSkeleton(this)
    })
  },
  // 底部下拉请求更多文章列表数据（微信生命周期）
  onReachBottom (e) {
    // 请求商品列表数据
    fetch(getIndexList('/goodsList', {
      // 每次根据上一次累加页数
      page: this.pageCountPage += 1
    })).then(data => {
      if (data.data) {
        // 合并后面请求到的数据
        this.goodsList = [...this.goodsList, ...data.data]// 保存数据直接渲染
      } else {
        this.pageMoreFlag = false // 控制显示 没有更多内容了
      }
    }).then(() => {
      // 关闭遮罩层加载中,自定义延迟关闭时间
      hideLoading(300)
    })
  }
}
</script>

<style>
/* 内容列表区 */
/* .container {} */

/* 分类图标 */
.nav {
  display: flex;
  height: 220rpx;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000;
}
.nav .navbox {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav .navbox::after {
  position: absolute;
  content: " ";
  top: 16rpx;
  right: 0;
  width: 1px;
  height: 82rpx;
  border-right: 1px solid rgba(190,190,190,.7);
}
.nav .navbox:last-of-type::after {
  border: none;
}
.nav .icon-nav {
  width: 100rpx;
  height: 100rpx;
}
.nav .icon-nav-logo {
  width: 149rpx;
  height: 100rpx;
}
.nav span {
  margin-top: 22rpx;
  font-size: 30rpx;
}
/* 客服服务按钮 */
.navbox .customer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
/* 活动广告 */
.banner-ad{
  margin: 20rpx 0;
  height: 260rpx;
  line-height: 260rpx;
}
.banner-ad image{
  width: 100%;
  height: 100%;
}
/* 轮播图样式 */
.swiper {
  text-align: center;
  font-weight: normal;
  font-size: 30rpx;
  height: 360rpx;
  line-height: 30rpx;
  color: #757575;
}
.swiper-wrap {
  position: relative;
  /* height: 360rpx; */
}
.swiper-image {
  width: 100%;
}
.swiper-image image{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/* 轮播标题框架 */
.swiper-textwrap {
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  line-height: 180rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(63, 76, 88, 0.3)100%);
}
/* .swiper-textwrap .title{} */

</style>
